import { Component, OnInit } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd';
import { Router } from '@angular/router';
// import cookie from '../../common/utils/cookie';
import getData_ajax from '../../common/utils/getData_ajax';
import config from '../../common/utils/baseUrl';
import G2 from '@antv/g2';
import promise from '../../common/utils/promise';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {
  public isSpinning: any = true; // 加载状态
  public ariticeData: any = []; // 文章数据
  public nowMonth: any = ''; // 当前月份
  public nowDay: any = ''; // 当前 日

  constructor(private modalService: NzModalService, private router: Router) {
  }

  ngOnInit() {
    // 获取现在日期
    if (new Date().getMonth() < 10) {
      this.nowMonth = '0' + (new Date().getMonth() + 1);
    } else {
      this.nowMonth = new Date().getMonth() + 1;
    }
    this.nowDay = new Date().getDate();
    // 获取数据
    this.getData();
    // 渲染G2图表
    this.setChart();
  }

  /**
   * 拉取数据
   */
  getData() {
    promise.commonRequest.post('', '/api/articleService/getArticeData').then((data) => {
      // @ts-ignore
      if (data.isEffective) {
        this.ariticeData = data;
        this.isSpinning = false;
      } else {
        this.router.navigateByUrl('/passport/login');
        sessionStorage.setItem('previousUrl', window.location.pathname);
      }
    }).catch((error) => {
      if (!error.responseJSON.isEffective) {
        this.router.navigateByUrl('/passport/login');
        sessionStorage.setItem('previousUrl', window.location.pathname);
      }
    });
  }

  /**
   * 渲染G2
   */
  setChart() {
    // 访客量
    setTimeout(() => {
      // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      const data = [
        { days: this.nowMonth + '-' + (this.nowDay - 1), value: 3 },
        { days: this.nowMonth + '-' + (this.nowDay - 2), value: 5 },
        { days: this.nowMonth + '-' + (this.nowDay - 3), value: 5 },
        { days: this.nowMonth + '-' + (this.nowDay - 4), value: 6 },
        { days: this.nowMonth + '-' + (this.nowDay - 5), value: 7 },
        { days: this.nowMonth + '-' + (this.nowDay - 6), value: 9 },
        { days: this.nowMonth + '-' + this.nowDay, value: 13 },
      ];
      // Step 1: 创建 Chart 对象
      const chart = new G2.Chart({
        container: 'visitor-volume--chart',
        forceFit: true, // 图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度。
        height: 350,
        padding: [20, 30, 30, 30],
      });
      // Step 2: 载入数据源
      chart.source(data);
      // Step 3: 设置纵坐标 value
      chart.scale('value', {
        min: 0,
      });
      // Step 4: 设置横坐标 days
      chart.scale('days', {
        range: [0, 1],
      });
      // Step 5: 图表的 tooltip 辅助配置
      chart.tooltip({
        itemTpl: '<li data-index={index}>'
          + '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>'
          + '访问量: {value}' + '人'
          + '</li>',
        crosshairs: {
          type: 'line',
        },
      });
      chart.line().position('days*value');
      chart.point().position('days*value').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1,
      });
      // 渲染图表
      chart.render();
    }, 0);
    // 新增文章数
    setTimeout(() => {
      // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      const data = [
        { days: this.nowMonth + '-' + (this.nowDay - 1), value: 0 },
        { days: this.nowMonth + '-' + (this.nowDay - 2), value: 1 },
        { days: this.nowMonth + '-' + (this.nowDay - 3), value: 1 },
        { days: this.nowMonth + '-' + (this.nowDay - 4), value: 0 },
        { days: this.nowMonth + '-' + (this.nowDay - 5), value: 1 },
        { days: this.nowMonth + '-' + (this.nowDay - 6), value: 0 },
        { days: this.nowMonth + '-' + this.nowDay, value: 0 },
      ];
      // Step 1: 创建 Chart 对象
      const chart = new G2.Chart({
        container: 'add-article--chart',
        forceFit: true, // 图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度。
        height: 350,
        padding: [20, 30, 30, 30],
      });
      // Step 2: 载入数据源
      chart.source(data);
      // Step 3: 设置纵坐标 value
      chart.scale('value', {
        min: 0,
      });
      // Step 4: 设置横坐标 days
      chart.scale('days', {
        range: [0, 1],
      });
      // Step 5: 图表的 tooltip 辅助配置
      chart.tooltip({
        itemTpl: '<li data-index={index}>'
          + '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>'
          + '新增文章数: {value}' + '人'
          + '</li>',
        crosshairs: {
          type: 'line',
        },
      });
      chart.line().position('days*value');
      chart.point().position('days*value').size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1,
      });
      // 渲染图表
      chart.render();
    }, 0);
  }
}

